<template>
	<view class="background"></view>
	<view class="head">
		<view class="back">
			<image src="@/static/public/arrow_left_000000.png" mode="widthFix" @click="goBack"></image>
		</view>
		<view class="title">订单详情</view>
		<view></view>
	</view>
	<view class="card">
		<view class="avatarAndNameAndMessage">
			<view class="avatar">
				<image :src="fileUrl + quest.userBaseInfoVo.avatar" mode="aspectFit"></image>
			</view>
			<view class="name">
				<view><span>{{quest.userBaseInfoVo.name}}</span> <span>发布者</span></view>
			</view>
			<view class="message" v-if="navigation.dictValue == 2" @click="callphone">
				联系对方
			</view>
		</view>
	</view>
	<view class="card" v-if="quest.receiverId!=null">
		<view class="avatarAndNameAndMessage">
			<view class="avatar">
				<image :src="fileUrl + quest.receiverInfoVo.avatar" mode="aspectFit"></image>
			</view>
			<view class="name">
				<view><span>{{quest.receiverInfoVo.name}}</span> <span>发布者</span></view>
			</view>
			<view class="message" v-if="navigation.dictValue == 1">
				联系对方
			</view>
		</view>
	</view>
	<view class="card">
		<view class="tap">内容描述</view>
		<view class="content">
			{{quest.content}}
		</view>
		<view class="tap" v-if="quest.cover.length > 0">描述图片</view>
		<view class="picture" v-if="quest.cover.length > 0">
			<up-album :urls="quest.cover" multipleSize="213rpx" singleSize="213rpx" space="10rpx"
				radius="31rpx"></up-album>
		</view>
		<view class="map" v-if="quest.serviceType == 1" @click="toMap">
			<image src="@/static/quest/order/orientation.png" mode="widthFix"></image> {{quest.address}}
		</view>
	</view>
	<view class="card">
		<view class="catalogue">
			<view class="title">订单编号：</view>
			<view class="text">{{quest.id}}</view>
		</view>
		<view class="catalogue">
			<view class="title">订单类型：</view>
			<view class="text"><span v-for="(item,index) in  type"><span
						v-if="item.dictValue == quest.serviceType">{{item.dictLabel}}</span></span></view>
		</view>
		<view class="catalogue">
			<view class="title">订单分类：</view>
			<view class="text">
				{{quest.appCateVo.name}}
			</view>
		</view>
		<view class="catalogue">
			<view class="title">截止时间：</view>
			<view class="text">{{quest.cutoffTime}}</view>
		</view>
		<view class="line"></view>
		<view class="catalogue price">
			<view class="title">金额：</view>
			<view class="text">￥{{quest.price}}</view>
		</view>
	</view>
	<view class="bottom">
		<view class="button"></view>
		<view class="button">
			<view class="t" v-if="navigation.dictValue==1&&quest.questionStatus==0"
				style="background-color: #E1F9B3;color: #999999;">
				等待审核
			</view>
			<view class="title" v-if="navigation.dictValue==1&&quest.questionStatus==1" @click="cancel(index)">
				取消任务
			</view>
			<view class="t" v-if="navigation.dictValue==1&&quest.questionStatus==3" @click="complete(index)">
				任务完成
			</view>

			<view class="t" v-if="navigation.dictValue==2&&quest.questionStatus==3"
				style="background-color: #E1F9B3;color: #999999;">
				等待发布者确认完成
			</view>
			<view class="t" v-if="quest.questionStatus==2" @click="process(index)">
				开始任务
			</view>
			<view class="t" v-if="quest.questionStatus==4" @click="clickAftet()">
				申请售后
			</view>
			<view class="t" v-if="quest.questionStatus==8" style="background-color: #E1F9B3;color: #999999;">
				等待售后审核
			</view>
			<view class="t" v-if="quest.questionStatus==5" style="background-color: #E1F9B3;color: #999999;">
				已完成
			</view>
			<view class="t" v-if="quest.questionStatus==7" style="background-color: #E1F9B3;color: #999999;">
				已取消
			</view>
		</view>
	</view>
	<view class="after" v-if="after.show">
		<view class="box">
			<view class="tap">备注（选填）：</view>
			<up-input placeholder="请输入内容" border="bottom"></up-input>
			<view class="tap">图片：</view>
			<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="3"
				width="200rpx" height="200rpx"></u-upload>
			<up-line></up-line>
			<view class="bu">
				<view class="button">
					<up-button text="取消" @click="after.show = false"></up-button>
				</view>
				<view class="button">
					<up-button text="确定" type="primary" @click="afterSale"></up-button>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import api from '@/utlis/api.js'
	import { onLoad } from '@dcloudio/uni-app';
	import { fileUrl } from '@/utlis/config.js';
	import { ref } from 'vue';
	import { DICT_TYPE, dict } from '@/utlis/dict.js';
	const quest = ref();
	const type = ref([]);
	const navigation = ref({});

	const callphone = () => {
		uni.makePhoneCall({
			phoneNumber: quest.value.phone
		});
	}

	//取消任务
	const cancel = (index) => {
		api("app/user/quest/cancel?questId=" + quest.value.id, "POST").then(res => {
			console.log(res)
		});
	}

	//任务开始执行
	const process = (index) => {
		api("app/user/quest/process?questId=" + quest.value.id, "POST").then(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				duration: 2000,
			});

			if (res.code == 200) {
				quest.value.questionStatus = 3;
			}
		});
	}

	//任务完成
	const complete = (index) => {
		api("app/user/quest/complete?questId=" + quest.value.id, "POST").then(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				duration: 2000,
			});

			if (res.code == 200) {
				quest.value.questionStatus = 4;
			}
		});
	}

	
	const after = ref({
		"mark": "",
		"show": false
	})
	//售后
	const clickAftet = () => {
		after.value.mark = "";
		after.value.show = true;
	}
	
	
	//申请售后
	const afterSale = async () => {
		after.value.show = false;
		let image = [];
		for (let i = 0; i < fileList.value.length; i++) {
			const res = await uploadFile(fileList.value[i].thumb);
			image.push(res.ossId);
		}
		api("app/user/quest/service", "POST", {
			"questId": quest.value.id,
			"mark": "1",
			"images":image.join(",")
		}).then(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				duration: 2000,
			});
			if (res.code == 200) {
				quest.value.questionStatus = 8;
			}
		});
	}












	//跳转高德
	const toMap = () => {
		uni.openLocation({
			latitude: Number(quest.value.latitude), //维度
			longitude: Number(quest.value.longitude), //经度
			name: quest.value.address
		})
	}


	onLoad((data) => {
		quest.value = JSON.parse(data.quest);
		navigation.value = JSON.parse(data.navigation);
		console.log(navigation.value)
		console.log(quest.value)

		//加载任务状态
		dict(DICT_TYPE.SERVICE_TYPE).then(data => {
			type.value = data;
		});
	});

	//返回
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	
	
	
	
	const fileList = ref([]);
	const afterRead = (event) => {
		fileList.value.push(...event.file);
	}
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	}
</script>
<style lang="scss">
	.background {
		background-color: #F7F7F7;
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: -99;
		top: 0;
	}

	.head {
		padding: 85rpx 0 51rpx 0;
		display: flex;
		flex-wrap: wrap;

		>view {
			width: 250rpx;
		}

		.back {
			padding-left: 20rpx;
			box-sizing: border-box;

			image {
				width: 19rpx;
			}
		}

		.title {
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
		}
	}

	.card {
		width: 710rpx;
		padding: 35rpx 21rpx;
		box-sizing: border-box;
		border-radius: 28rpx;
		background-color: #FFFFFF;
		margin: 0 20rpx 20rpx 20rpx;

		.avatarAndNameAndMessage {
			display: flex;
			flex-wrap: wrap;

			>view {
				height: 80rpx;
			}

			.avatar image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}

			.name {
				width: 383rpx;
				box-sizing: border-box;
				padding-left: 18rpx;
				font-size: 30rpx;
				line-height: 80rpx;

				span {
					line-height: 35rpx;
					display: inline-block;

				}

				span:nth-of-type(2) {
					padding: 5rpx;
					font-size: 20rpx;
					background-color: #E9F6EC;
					padding: 0 10rpx;
					border-radius: 10rpx;
				}
			}

			.message {
				width: 205rpx;
				border: 2rpx solid #5A8FFC;
				box-sizing: border-box;
				text-align: center;
				color: #5A8FFC;
				padding: 16rpx 0;
				border-radius: 39rpx;
			}
		}

		.tap {
			font-size: 30rpx;
			color: #8E8E8E;
			line-height: 42rpx;

		}

		.content {
			margin: 20rpx 0;
			width: 668rpx;
		}

		.picture {
			margin-top: 20rpx;
		}

		.map {
			height: 84rpx;
			background-image: url("@/static/quest/order/autonavi.png");
			background-size: 100%;
			line-height: 84rpx;
			text-align: center;
			color: #0090FF;
			font-size: 26rpx;

			image {
				width: 45rpx;
				vertical-align: -13rpx;
			}
		}

		.catalogue {
			display: flex;
			flex-wrap: wrap;
			line-height: 72rpx;
			font-size: 30rpx;

			.title {
				width: 40%;
				color: #9B9B9B;
			}

			.text {
				width: 60%;
				text-align: right;
			}
		}

		.line {
			height: 1rpx;
			border: 1rpx solid #DEDEDE;
		}

		.price {
			font-weight: 500;

			>.title {
				color: #000000;
			}

			>.text {
				color: #FF0000;
			}
		}

	}

	.bottom {
		width: 750rpx;
		height: 157rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-wrap: wrap;

		.button {
			width: 50%;

			.t {
				width: 350rpx;
				height: 96rpx;
				line-height: 96rpx;
				border-radius: 53rpx;
				text-align: center;
				background-color: #99E72E;
			}
		}

		.button:nth-of-type(2) {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
	}
	
	
	
	
	.after {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		display: flex;
		justify-content: center;
	
		.box {
			background-color: #FFFFFF;
			width: 700rpx;
			margin: auto;
			border-radius: 30rpx;
			padding: 20rpx;
			box-sizing: border-box;
	
			.tap {
				font-size: 30rpx;
				color: #818181;
				margin: 20rpx 0;
			}
	
			.bu {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
	
				.button {
					width: 300rpx;
					margin: 0 15rpx;
				}
			}
		}
	}
</style>